<template>
  <!-- 设备出库确认页面 -->
  <div class="equipment-delivery">
    <!--按钮区域 begin-->
    <div class="btns" style="padding: 1em; margin-bottom: 1em; background: #fff">
      <el-select v-model="searchForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-select v-model="searchForm.status" placeholder="出库状态" filterable clearable>
        <el-option v-for="item in ['已出库', '未出库']" :keys="item" :label="item" :value="item"/>
      </el-select>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchForm.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
    </div>
    <!--按钮区域 end-->
    <div class="btns">
      <el-button type="primary" size="small" :disabled="selectedRowKeysItems.length>0?false:true" icon="el-icon-check" @click="outboundItems">出库</el-button>
      <el-button @click="()=>{this.drawer=true; this.toLogSearch()}" type="primary" size="small" style="float: right; margin-right: 1em">查看出库日志</el-button>
    </div>
    <!--表格卡片区域 begin-->
    <el-card shadow="never">
      <a-table
        size="small"
        :rowKey="record => record.itemId"
        :loading="stockDeliveryTable.loading"
        :data-source="stockDeliveryTable.data"
        :scroll="stockDeliveryTable.data.length > 0 ?{ x: 1600}:{}"
        :row-selection="{ selectedRowKeys: selectedRowKeysItems, onChange: itemsSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.selectedRowKeysItems =  stockDeliveryTable.data.map(item=>{return item.itemId});
            },
          }]}">
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="stockNumber" title="未出库" data-index="stockNumber">
          <template slot-scope="text, record">
            <el-tag type="success">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="deliveryNumber" title="已出库" data-index="deliveryNumber">
          <template slot-scope="text, record">
            <el-tag :type="text == 0 ? 'success':'warning'">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="supplier" title="供应商" data-index="supplier" />
        <a-table-column :width="300" align="center" ellipsis="true" key="brand" title="品牌" data-index="brand" />
        <a-table-column :width="150" align="center" ellipsis="true" key="model" title="型号" data-index="model" />
        <a-table-column align="center" key="params" ellipsis="true" title="技术参数" data-index="params" />
        <a-table-column :width="100" align="center" key="price" title="单价" data-index="price" />
        <a-table-column :width="100" align="center" key="totalPrice" title="总价" >
          <template slot-scope="text, record">
            {{record.price&&record.number?record.price * record.number:''}}
          </template>
        </a-table-column>
        <a-table-column :width="100" align="center" ellipsis="true" key="delivery" title="货期" data-index="delivery" />
        <a-table-column :width="100" align="center" ellipsis="true" key="warranty" title="质保期" data-index="warranty" />
        <a-table-column :width="100" align="center" ellipsis="true" key="remark" title="备注" data-index="remark" />

      </a-table>
    </el-card>
    <!--表格卡片区域 end-->
    <!--右边抽屉-->
    <el-drawer
      title="出库操作日志"
      :visible.sync="drawer"
      direction="rtl"
      size="70%"
    >
      <div class="btns" style="padding: 1em; background: #fff">
        <el-select v-model="searchLogForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
          <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
        <el-select v-model="searchLogForm.contractId" placeholder="选择合同" filterable clearable>
          <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
        </el-select>
        <el-input v-model="searchLogForm.item" placeholder="设备名"></el-input>
        <el-date-picker
          style="margin-left: 8px"
          v-model="searchLogForm.time"
          unlink-panels
          value-format="timestamp"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="btns">
        <el-button @click="toLogSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px; float: right">查询</el-button>
        <el-button type="danger" size="small" :disabled="logRowKeysItems.length>0?false:true" icon="el-icon-delete" @click="revokeItems">撤销</el-button>
      </div>
      <a-table
        size="small"
        style="margin-left: 1em; margin-right: 1em"
        :rowKey="record => record.id"
        :loading="stockDeliveryLogTable.loading"
        :data-source="stockDeliveryLogTable.data"
        :scroll="stockDeliveryLogTable.data.length > 0 ?{ x: 800}:{}"
        :row-selection="{ selectedRowKeys: logRowKeysItems, onChange: logSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.logRowKeysItems = stockDeliveryLogTable.data.map(item=>{return item.id});
            },
          }]}">
        <a-table-column align="center" ellipsis="true" key="item" title="设备名" data-index="item"></a-table-column>
        <a-table-column align="center" ellipsis="true" style="width: 20px" key="deliveryNumber" title="出库数量" data-index="deliveryNumber"></a-table-column>
        <a-table-column align="center" ellipsis="true" style="width: 50px" key="deliveryPeople" title="出库人" data-index="deliveryPeople"></a-table-column>
        <a-table-column align="center" ellipsis="true" style="width: 50px" key="signedBy" title="签收人" data-index="signedBy"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="deliveryTime" title="出库时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.deliveryTime)}}
          </template>
        </a-table-column>
        <a-table-column align="center" ellipsis="true" key="time" title="操作时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.time)}}
          </template>
        </a-table-column>
      </a-table>
    </el-drawer>
    <!--模态框-->
    <el-dialog v-el-drag-dialog :title="stockDialog.title" :visible.sync="stockDialog.visible">
      <el-form :model="stockDialog.form"  status-icon>
        <el-form-item :label="stockDialog.title+'数量'" label-width="80px" size="small" prop="number" v-if="selectedRowKeysItems.length>1?false:true">
          <el-input-number v-model="stockDialog.form.deliveryNumber" :precision="2" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item :label="stockDialog.title+'时间'" label-width="80px" size="small" prop="time" v-if="selectedRowKeysItems.length>1?false:true">
          <el-date-picker
            v-model="stockDialog.form.deliveryTime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出库人" label-width="80px" size="small" prop="operator">
          <el-input v-model="stockDialog.form.deliveryPeople" type="text" size="small"></el-input>
        </el-form-item>
        <el-form-item label="签收人" label-width="80px" size="small" prop="signedBy">
          <el-input v-model="stockDialog.form.signedBy" type="text" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" size="small" prop="remark" v-if="selectedRowKeysItems.length>1?false:true">
          <el-input v-model="stockDialog.form.deliveryRemark" type="textarea" size="small"/>
        </el-form-item>
        <el-form-item  label="签收凭证" label-width="80px" size="small" prop="sendFor">
          <common-upload
            :url="url.uploadImg"
            v-model="fileList"
            :is-dragger="false"
            :multiple="false"
            :maxNum="1"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="stockDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="stockDialogHandle()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

    import "@/styles/auto-style.css";
    import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
    import elDragDialog from "@/directive/el-drag-dialog";
    import { dateTimeFormat, dateFormat } from '@/utils/format'
    import CommonUpload from "@/components/Upload/CommonUpload";

    export default {
        directives: { elDragDialog },
        components: {
          CommonUpload
        },
        data() {
            return {
                searchLogForm: {},
                stockDeliveryLogTable: {
                    data: [],
                    loading: false
                },
                logRowKeysItems: [],
                logRowKeys: [],
                fileList: [],
                dateTimeFormat,
                drawer: false,
                stockDialog: {
                    title: '出库',
                    form: {},
                    visible: false
                },
                selectedRowKeysItems: [],
                selectedRowKeys: [],
                url: {
                    findDeliveryByParams: '/stock/delivery/findDeliveryByParams',
                    singleOutbound: '/stock/delivery/singleOutbound',
                    batchOutbound: '/stock/delivery/batchOutbound',
                    revoke: '/stock/delivery/revoke',
                    findOutboundLog: '/stock/delivery/findOutboundLog',
                    uploadImg: process.env.VUE_APP_BASE_API+'/stock/delivery/uploadImg',
                },
                // 按钮区域表单
                searchForm: {

                },
                options: {
                    projects: [],
                    contracts: [],
                },
                stockDeliveryTable: {
                    data: [],
                    loading: false,
                }
            }
        },
        created() {
            this.loadProjects()
        },
        methods: {
            outboundItems(){
              this.stockDialog.visible = true
            },
            stockDialogHandle(){
                this.stockDialog.form.itemId = this.selectedRowKeysItems[0]
                if (this.fileList && this.fileList.length>0){
                  this.stockDialog.form.singnedFor = this.fileList[0].response.data.url
                }
                // 批量出库
                if (this.selectedRowKeysItems.length > 1){
                  postActionByQueryString(this.url.batchOutbound,
                    {itemIds : this.selectedRowKeysItems,
                      signedBy : this.stockDialog.form.signedBy,
                      signedFor : this.stockDialog.form.singnedFor,})
                    .then(resp => {
                      this.$message.success("success")
                      this.selectedRowKeysItems = []
                      this.stockDialog.form = {}
                      this.fileList = []
                      this.stockDialog.visible = false
                      this.toSearch()
                    })
                } else {
                  // 单个出库
                  postActionByQueryString(this.url.singleOutbound, this.stockDialog.form)
                    .then(resp => {
                      this.$message.success("success")
                      this.selectedRowKeysItems = []
                      this.stockDialog.form = {}
                      this.fileList = []
                      this.stockDialog.visible = false
                      this.toSearch()
                    })
                }
            },
            revokeItems(){
                this.$confirm('撤销'+ this.logRowKeysItems.length + '项' +'，是否确定选择？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postActionByQueryString(this.url.revoke, {ids : this.logRowKeysItems})
                        .then(resp => {
                            this.logRowKeysItems = []
                            this.toLogSearch()
                            this.toSearch()
                        })
                }).catch(() => {
                    //this.onSelectChange(ids, rows)
                })
            },
            itemsSelectionChange(record){
                const itemsId = []
                record.map(item => {
                    itemsId.push(item)
                })
                this.selectedRowKeysItems = itemsId
            },
            logSelectionChange(record){
                const ids = []
                record.map(item => {
                    ids.push(item)
                })
                this.logRowKeysItems = ids
            },
            //日志查询
            toLogSearch(){
                this.logRowKeysItems = []
                this.stockDeliveryLogTable.loading = true
                if(this.searchLogForm.time){
                    this.searchLogForm.startTime = this.searchLogForm.time[0]
                    this.searchLogForm.endTime = this.searchLogForm.time[1]
                }
                delete this.searchLogForm.time
                getAction(this.url.findOutboundLog, this.searchLogForm)
                    .then(resp => {
                        this.stockDeliveryLogTable.data = resp.data
                        this.stockDeliveryLogTable.loading = false
                    })
                    .catch(()=>{
                        this.stockDeliveryLogTable.loading = false
                    })
            },
            // 按钮区域搜索事件
            toSearch() {
                this.stockDeliveryTable.loading = true
                getAction(this.url.findDeliveryByParams, this.searchForm)
                    .then(resp => {
                        this.stockDeliveryTable.data = resp.data
                        this.stockDeliveryTable.loading = false
                    })
                    .catch(()=>{
                        this.stockDeliveryTable.loading = false
                    })
            },
            // 查询项目列表
            loadProjects() {
                getAction("/purchase/project/findAllLike")
                    .then((resp) => {
                        this.options.projects = resp.data
                    })
            },
            // 查询合同列表
            loadContracts(proId) {
                getAction('/purchase/contract/findByProjectId', { projectId: proId })
                    .then(resp => {
                        this.options.contracts = resp.data
                    })
            },
            // 项目下拉框 Change 事件
            proSelectChange(id) {
                this.$delete(this.searchForm,'contractId')
                this.loadContracts(id)
            },
        }
    }
</script>
<style lang="scss" scoped>

  .equipment-delivery {

  }
</style>

